<script setup lang="ts">
import { onMounted, reactive, ref} from "vue";
import useMenuStore from "@/store/modules/menu.ts";
import {confirm, toDate} from "@/utils";
import {DeleteFilled, DocumentAdd, Edit, FolderAdd} from "@element-plus/icons-vue";
import { type FormInstance} from "element-plus";
// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import type {TMenuInfo, TMenuParams} from "@/api/menu/type.ts";
// 控制表单弹出层是否显示
const dialogVisible = ref(false);
// 获取菜单表单实例的
const formRef = ref<FormInstance>();
// 表单数据对象
const menuForm = reactive<TMenuParams>({
    _id: "",
    // 名称
    name: "",
    // 类型：1- 菜单  2- 按钮
    type: 1,
    // 所属上一级的菜单ID
    parent_id: "",
    // 图标
    icon: "",
    // 路由地址
    routePath: "",
    // 组件地址
    componentPath: "",
    // 权限标识
    sign: "",
    // 排序
    sort: 1,
    // 状态：1- 正常  0- 禁用
    status: 1
})
const menuStore = useMenuStore();
// 提交表单
const submitForm = function () {
    formRef.value?.validate(async (valid) => {
        if (valid) {
            if(menuForm._id && menuForm._id.length>0)
                await menuStore.putSysMenuAsync(menuForm);
            else await menuStore.postSysMenuAsync(menuForm);
            cancelForm();
        }
    })
}
// 取消表单
const cancelForm = function () {
    Object.assign(menuForm, {
        _id: "",
        // 名称
        name: "",
        // 类型：1- 菜单  2- 按钮
        type: 1,
        // 所属上一级的菜单ID
        parent_id: "",
        // 图标
        icon: "",
        // 路由地址
        routePath: "",
        // 组件地址
        componentPath: "",
        // 权限标识
        sign: "",
        // 排序
        sort: 1,
        // 状态：1- 正常  0- 禁用
        status: 1
    });

    dialogVisible.value = false;


}
// 修改表单
const editForm = function (row:TMenuInfo) {
    const {_id,name,type,parent_id,icon,routePath,componentPath,sign,sort,status} = row;
    Object.assign(menuForm,{
        _id,
        // 名称
        name,
        // 类型：1- 菜单  2- 按钮
        type,
        // 所属上一级的菜单ID
        parent_id,
        // 图标
        icon,
        // 路由地址
        routePath,
        // 组件地址
        componentPath,
        // 权限标识
        sign,
        // 排序
        sort,
        // 状态：1- 正常  0- 禁用
        status
    })
    dialogVisible.value = true;
}
// 操作添加事件函数
const addMenuHandler = function (parent_id: string) {
    menuForm.parent_id = parent_id;// 设置上一级菜单初始值
    dialogVisible.value = true;// 出现弹出层
}
// 操作删除事件函数
const deleteManuHandler = function(id:string){
    confirm(()=>{
        menuStore.deleteSysMenuByIdAsync(id);
    })
}

onMounted(() => {
    // 获取菜单列表
    menuStore.getSysAllMenuAsync();
})
const tableRowClassName = ({rowIndex}: { rowIndex: number }) => {
    const i = rowIndex % 4;
    if (i === 0) {
        return 'warning-row'
    } else if (i === 2) {
        return 'success-row'
    }
    return ''
}
defineOptions({
    name: "SysMenu"
})
</script>

<template>
    <el-card>
        <el-button :icon="FolderAdd" @click="dialogVisible=true;formRef?.resetFields()" type="primary">添加菜单</el-button>
    </el-card>
    <el-table row-key="_id" border :data="menuStore.allMenuList" :row-class-name="tableRowClassName"
              style="width: 100%;margin-top:5px;height:calc(100vh - 165px) ">
        <el-table-column prop="name" label="菜单名称" min-width="150"/>
        <el-table-column label="图标" width="180">
            <template #default="scope">
                <el-icon v-if="scope.row.icon">
                    <component :is="scope.row.icon"/>
                </el-icon>
                {{ scope.row.icon }}
            </template>
        </el-table-column>
        <el-table-column align="center" label="状态" width="120">
            <template #default="scope">
                <el-switch @change="(val:boolean)=>menuStore.putSysMenuStatusByIdAsync(scope.row._id,val?1:0)" size="large"
                           :model-value="scope.row.status===1" inline-prompt active-text="正常" inactive-text="禁用"/>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="sign" label="权限标识" width="150"/>
        <el-table-column align="center" prop="routePath" label="路由地址" width="150"/>
        <el-table-column align="center" prop="componentPath" label="组件地址" width="150"/>
        <el-table-column align="center" prop="sort" label="排序" width="150"/>
        <el-table-column align="center" label="创建时间" width="180">
            <template #default="scope">
                <el-text>{{ toDate(scope.row.createTime) }}</el-text>
            </template>
        </el-table-column>
        <el-table-column align="center" label="修改时间" width="180">
            <template #default="scope">
                <el-text>{{ toDate(scope.row.updateTime) }}</el-text>
            </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" label="操作" width="200">
            <template #default="scope">
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="添加菜单"
                    :enterable="false"
                    placement="top-start"
                >
                    <el-button type="primary" @click="addMenuHandler(scope.row._id)" :icon="DocumentAdd" circle/>
                </el-tooltip>
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="编辑菜单"
                    :enterable="false"
                    placement="top"
                >
                    <el-button @click="editForm(scope.row)" type="success" :icon="Edit" circle/>
                </el-tooltip>
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="删除菜单"
                    :enterable="false"
                    placement="top-end"
                >
                    <el-button @click="deleteManuHandler(scope.row._id)" :disabled="scope.row.children && scope.row.children.length>0" type="danger" :icon="DeleteFilled" circle/>
                </el-tooltip>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog
        v-model="dialogVisible"
        title="添加菜单"
        width="500"
        :close-on-click-modal="false"
        :show-close="false"
    >
        <el-form
            ref="formRef"
            style="max-width: 600px"
            :model="menuForm"
            label-width="auto"
            class="demo-dynamic"
        >
            <el-form-item prop="type" label="类型：">
                <el-radio-group v-model="menuForm.type">
                    <el-radio :value="1" size="large">菜单</el-radio>
                    <el-radio :value="2" size="large">按钮</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item prop="parent_id" label="所属菜单：">
                <el-cascader
                    v-model="menuForm.parent_id"
                    clearable
                    filterable
                    placeholder="请选择所属菜单"
                    :props="{
                        checkStrictly:true,

                    }"
                    :options="menuStore.parentMenuList"
                />
            </el-form-item>
            <el-form-item prop="name" label="名称：" :rules="[{
                        required: true,
                        message: '请输入菜单名称',
                        trigger: 'blur',
                    }
                  ]"
            >
                <el-input placeholder="请输入菜单名称" v-model="menuForm.name"/>
            </el-form-item>
            <template v-if="menuForm.type===1">
                <el-form-item prop="icon" label="图标：" :rules="[{
                        required: true,
                        message: '请选择菜单图标',
                        trigger: 'change',
                    }
                  ]"
                >
                    <el-select
                        placeholder="请选择图标"
                        v-model="menuForm.icon"
                        size="default"
                        filterable
                        clearable
                        style="width: 240px"
                    >
                        <el-option
                            v-for="item in ElementPlusIconsVue"
                            :key="item.name"
                            :label="item.name"
                            :value="item.name"
                        >
                            <el-space>
                                <el-icon>
                                    <component :is="item.name"/>
                                </el-icon>
                                <el-text>{{ item.name }}</el-text>
                            </el-space>
                        </el-option>
                        <template #label="{ label,value  }">
                            <el-space>
                                <el-icon>
                                    <component :is="value"/>
                                </el-icon>
                                <el-text>{{ label }}</el-text>
                            </el-space>

                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item prop="routePath" label="路由地址：" :rules="[{
                        required: true,
                        message: '请输入路由地址',
                        trigger: 'blur',
                    }
                  ]"
                >
                    <el-input placeholder="请输入路由地址" v-model="menuForm.routePath"/>
                </el-form-item>
                <el-form-item prop="componentPath" label="组件地址：" :rules="[{
                        required: true,
                        message: '请输入组件地址',
                        trigger: 'blur',
                    }
                  ]"
                >
                    <el-input placeholder="请输入组件地址" v-model="menuForm.componentPath"/>
                </el-form-item>

            </template>
            <el-form-item prop="sign" label="权限标识：" :rules="[{
                        required: true,
                        message: '请输入权限标识',
                        trigger: 'blur',
                    }
                  ]"
            >
                <el-input placeholder="请输入权限标识" v-model="menuForm.sign"/>
            </el-form-item>
            <el-form-item prop="sort" label="排序：" :rules="[{
                        required: true,
                        message: '请输入排序，数字越大越靠前',
                        trigger: 'blur',
                    }
                  ]"
            >
                <el-input-number v-model="menuForm.sort" :min="1"/>
            </el-form-item>
            <el-form-item prop="status" label="状态：">
                <el-radio-group v-model="menuForm.status">
                    <el-radio :value="1" size="large">正常</el-radio>
                    <el-radio :value="0" size="large">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelForm">取消</el-button>
                <el-button type="primary" @click="submitForm">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped lang="less">
.el-table {
    :deep(.warning-row) {
        --el-table-tr-bg-color: var(--el-color-warning-light-9);
    }

    :deep(.success-row) {
        --el-table-tr-bg-color: var(--el-color-success-light-9);
    }
}

.el-radio.el-radio--large {
    height: auto;
}
</style>